import { ref, watchEffect, toValue } from 'vue'

//参数url设定为ref对象
export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)

    //toValue():用来规范化一个可以是值、ref 或 getter 的参数。
    //这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然
  function fetchData(){
	   fetch(toValue(url))//返回值是:promise对象
      .then((res) => res.json())
      .then((json) => (data.value = json))
      .catch((err) => (error.value = err))
	}

    //侦听器,等同于watch,只不过初始化时就会执行一次.
    watchEffect(() => {
        // 重新执行访问接口
        fetchData(url)
    })

  return { data, error }
}